<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Gallery</title>
  </head>
  <body>
    <!-- 全局容器 -->
    <div class="flex items-center justify-center min-h-screen bg-cyan-50">
      <!-- 卡片容器 -->
      <div class="bg-white p-6 m-3 space-y-10 shadow-2xl rounded-3xl md:p-40">
        <!-- 菜单容器 -->
        <div
          class="flex flex-col items-center justify-center space-y-3 md:flex-row md:space-y-0 md:space-x-8 md:mb-24 md:justify-end"
        >
          <!-- 菜单项 -->
          <div class="group">
            <a href="#">矢量图</a>
            <div
              class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
            ></div>
          </div>
          <div class="group">
            <a href="#">插图</a>
            <div
              class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
            ></div>
          </div>
          <div class="group">
            <a href="#">像素图</a>
            <div
              class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
            ></div>
          </div>
          <div class="group">
            <a href="#">图标</a>
            <div
              class="mx-2 mt-2 duration-500 border-b-2 opacity-0 border-black group-hover:opacity-100"
            ></div>
          </div>
        </div>
        <!-- 搜索容器 -->
        <div
          class="flex flex-col justify-between space-y-5 md:flex-row md:space-y-0"
        >
          <!-- 输入和svg -->
          <div class="flex justify-between border-b">
            <input
              class="ml-6 border-none md:w-80 placeholder:font-thin focus:outline-none"
              placeholder="搜索"
            />
            <button>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                class="w-8 text-gray-300 duration-200 hover:scale-110"
                viewBox="0 0 24 24"
                stroke-width="1.5"
                stroke="currentColor"
                fill="none"
                stroke-linecap="round"
                stroke-linejoin="round"
              >
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <circle cx="10" cy="10" r="7" />
                <line x1="21" y1="21" x2="15" y2="15" />
              </svg>
            </button>
          </div>
          <!-- 上传按钮 -->
          <button
            class="py-3 px-14 text-lg font-normal text-white bg-black border border-black rounded-md shadow-2xl duration-200 hover:bg-white hover:text-black"
          >
            上传
          </button>
        </div>
        <!-- 相册容器 -->
        <div class="grid gap-4 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
          <!-- 图片1 -->
          <div class="relative group">
            <img src="/image1.jpg" alt="" class="w-72" />
            <div
              class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
            >
              <div class="flex justify-between w-full">
                <div class="font-normal">
                  <p class="text-sm">抽象绘画</p>
                  <p class="text-xs">245 赞 - 35 分享</p>
                </div>
                <div class="flex items-center">
                  <img src="/bookmark.svg" alt="" />
                </div>
              </div>
            </div>
          </div>
          <!-- 图片2 -->
          <div class="relative group">
            <img src="/image2.jpg" alt="" class="w-72" />
            <div
              class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
            >
              <div class="flex justify-between w-full">
                <div class="font-normal">
                  <p class="text-sm">抽象绘画</p>
                  <p class="text-xs">245 赞 - 35 分享</p>
                </div>
                <div class="flex items-center">
                  <img src="/bookmark.svg" alt="" />
                </div>
              </div>
            </div>
          </div>
          <!-- 图片3 -->
          <div class="relative group">
            <img src="/image3.jpg" alt="" class="w-72" />
            <div
              class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
            >
              <div class="flex justify-between w-full">
                <div class="font-normal">
                  <p class="text-sm">抽象绘画</p>
                  <p class="text-xs">245 赞 - 35 分享</p>
                </div>
                <div class="flex items-center">
                  <img src="/bookmark.svg" alt="" />
                </div>
              </div>
            </div>
          </div>
          <!-- 图片4 -->
          <div class="relative group">
            <img src="/image4.jpg" alt="" class="w-72" />
            <div
              class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
            >
              <div class="flex justify-between w-full">
                <div class="font-normal">
                  <p class="text-sm">抽象绘画</p>
                  <p class="text-xs">245 赞 - 35 分享</p>
                </div>
                <div class="flex items-center">
                  <img src="/bookmark.svg" alt="" />
                </div>
              </div>
            </div>
          </div>
          <!-- 图片5 -->
          <div class="relative group">
            <img src="/image5.jpg" alt="" class="w-72" />
            <div
              class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
            >
              <div class="flex justify-between w-full">
                <div class="font-normal">
                  <p class="text-sm">抽象绘画</p>
                  <p class="text-xs">245 赞 - 35 分享</p>
                </div>
                <div class="flex items-center">
                  <img src="/bookmark.svg" alt="" />
                </div>
              </div>
            </div>
          </div>
          <!-- 图片6 -->
          <div class="relative group">
            <img src="/image6.jpg" alt="" class="w-72" />
            <div
              class="absolute bottom-0 left-0 right-0 p-2 px-4 text-white duration-500 bg-black opacity-0 group-hover:opacity-100 bg-opacity-40"
            >
              <div class="flex justify-between w-full">
                <div class="font-normal">
                  <p class="text-sm">抽象绘画</p>
                  <p class="text-xs">245 赞 - 35 分享</p>
                </div>
                <div class="flex items-center">
                  <img src="/bookmark.svg" alt="" />
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script type="module" src="/main.js"></script>
  </body>
</html>
